<template>
  <div class="pb-20 max-w-screen-x1">
    <!-- 搜索栏 -->
    <div class="sticky top-0 bg-white z-40 shadow-sm">
      <div class="flex items-center justify-between p-4">
        <div class="flex-1 relative">
          <input
              type="text"
              placeholder="搜索美食、商家"
              class="w-full py-2 px-4 pl-10 bg-gray-100 rounded-full text-sm focus:outline-none focus:ring-2 focus:ring-primary-500/50"
          >
          <i class="fa fa-search absolute left-3 top-1/2 -translate-y-1/2 text-gray-400"></i>
        </div>
      </div>
    </div>

    <!-- 推荐商家 -->
    <div class="bg-white mt-3">
      <div class="px-4 py-3">
        <h3 class="font-medium">推荐商家</h3>
      </div>
      <div class="divide-y">
        <div class="px-4 py-3 flex gap-3 cursor-pointer">
          <img src="./img/sj01.png" alt="" class="w-20 h-20 object-cover rounded-md">
          <div class="flex-1">
            <div class="flex justify-between">
              <h4 class="font-medium">万家饺子（软件园E18店）</h4>
              <span class="bg-red-100 text-red-600 text-xs px-1 rounded">新店特惠</span>
            </div>
            <div class="flex items-center mt-1">
              <span class="text-orange-500 text-xs font-medium">★ 4.9</span>
              <span class="text-gray-400 text-xs mx-1">|</span>
              <span class="text-gray-500 text-xs">3.2km · 45分钟</span>
            </div>
            <div class="mt-1">
              <span class="bg-primary-500/10 text-primary-500 text-xs px-1 rounded mr-1">满减</span>
              <span class="text-gray-500 text-xs">满100减20，满200减50</span>
            </div>
          </div>
        </div>
        <div class="px-4 py-3 flex gap-3 cursor-pointer">
          <img src="./src/img/sj03.png" alt="" class="w-20 h-20 object-cover rounded-md">
          <div class="flex-1">
            <div class="flex justify-between">
              <h4 class="font-medium">星巴克咖啡</h4>
              <span class="bg-blue-100 text-blue-600 text-xs px-1 rounded">人气优选</span>
            </div>
            <div class="flex items-center mt-1">
              <span class="text-orange-500 text-xs font-medium">★ 4.6</span>
              <span class="text-gray-400 text-xs mx-1">|</span>
              <span class="text-gray-500 text-xs">1.5km · 35分钟</span>
            </div>
            <div class="mt-1">
              <span class="bg-primary-500/10 text-primary-500 text-xs px-1 rounded mr-1">优惠</span>
              <span class="text-gray-500 text-xs">第二份半价</span>
            </div>
          </div>
        </div>
        <div class="px-4 py-3 flex gap-3 cursor-pointer">
          <img src="./img/sj02.png" alt="" class="w-20 h-20 object-cover rounded-md">
          <div class="flex-1">
            <div class="flex justify-between">
              <h4 class="font-medium">小锅饭豆腐馆（全运店）</h4>
              <span class="bg-green-100 text-green-600 text-xs px-1 rounded">限时优惠</span>
            </div>
            <div class="flex items-center mt-1">
              <span class="text-orange-500 text-xs font-medium">★ 4.7</span>
              <span class="text-gray-400 text-xs mx-1">|</span>
              <span class="text-gray-500 text-xs">0.8km · 25分钟</span>
            </div>
            <div class="mt-1">
              <span class="bg-primary-500/10 text-primary-500 text-xs px-1 rounded mr-1">满减</span>
              <span class="text-gray-500 text-xs">满30减8，满60减20</span>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 热门推荐 -->
    <div class="bg-white mt-3">
      <div class="px-4 py-3">
        <h3 class="font-medium">热门推荐</h3>
      </div>
      <div class="grid grid-cols-2 gap-2 p-2">
        <div class="rounded-lg overflow-hidden shadow-sm cursor-pointer">
          <img src="./img/sj04.png" alt="" class="w-full h-32 object-cover">
          <div class="p-2">
            <h4 class="font-medium">美食特惠专场</h4>
            <p class="text-xs text-gray-500 mt-1">满30减10，满50减20</p>
          </div>
        </div>
        <div class="rounded-lg overflow-hidden shadow-sm cursor-pointer">
          <img src="./img/sj03.png" alt="" class="w-full h-32 object-cover">
          <div class="p-2">
            <h4 class="font-medium">下午茶时光</h4>
            <p class="text-xs text-gray-500 mt-1">咖啡买一送一</p>
          </div>
        </div>
        <div class="rounded-lg overflow-hidden shadow-sm cursor-pointer">
          <img src="./img/sj05.png" alt="" class="w-full h-32 object-cover">
          <div class="p-2">
            <h4 class="font-medium">新店开业</h4>
            <p class="text-xs text-gray-500 mt-1">首单立减15元</p>
          </div>
        </div>
        <div class="rounded-lg overflow-hidden shadow-sm cursor-pointer">
          <img src="./img/sj02.png" alt="" class="w-full h-32 object-cover">
          <div class="p-2">
            <h4 class="font-medium">深夜食堂</h4>
            <p class="text-xs text-gray-500 mt-1">22点后下单享8折</p>
          </div>
        </div>
      </div>
    </div>

    <!-- 猜你喜欢 -->
    <div class="bg-white mt-3">
      <div class="px-4 py-3">
        <h3 class="font-medium">猜你喜欢</h3>
      </div>
      <div class="divide-y">
        <div class="px-4 py-3 flex gap-3 cursor-pointer">
          <img src="./img/sj01.png" alt="" class="w-20 h-20 object-cover rounded-md">
          <div class="flex-1">
            <div class="flex justify-between">
              <h4 class="font-medium">万家饺子</h4>
              <span class="bg-purple-100 text-purple-600 text-xs px-1 rounded">新店</span>
            </div>
            <div class="flex items-center mt-1">
              <span class="text-orange-500 text-xs font-medium">★ 4.5</span>
              <span class="text-gray-400 text-xs mx-1">|</span>
              <span class="text-gray-500 text-xs">0.7km · 20分钟</span>
            </div>
            <div class="mt-1">
              <span class="bg-primary-500/10 text-primary-500 text-xs px-1 rounded mr-1">满减</span>
              <span class="text-gray-500 text-xs">满30减5，满50减10</span>
            </div>
          </div>
        </div>
        <div class="px-4 py-3 flex gap-3 cursor-pointer">
          <img src="./img/sj03.png" alt="" class="w-20 h-20 object-cover rounded-md">
          <div class="flex-1">
            <div class="flex justify-between">
              <h4 class="font-medium">麦当劳麦乐送</h4>
              <span class="bg-yellow-100 text-yellow-600 text-xs px-1 rounded">热销</span>
            </div>
            <div class="flex items-center mt-1">
              <span class="text-orange-500 text-xs font-medium">★ 4.8</span>
              <span class="text-gray-400 text-xs mx-1">|</span>
              <span class="text-gray-500 text-xs">1.0km · 30分钟</span>
            </div>
            <div class="mt-1">
              <span class="bg-primary-500/10 text-primary-500 text-xs px-1 rounded mr-1">优惠</span>
              <span class="text-gray-500 text-xs">新品买一送一</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'

// 页面数据
const pageData = ref({
  // 可以在这里添加更多数据
})

// 生命周期钩子
const onMounted = () => {
  // 页面加载时执行的操作
}

// 事件处理函数
const handleClick = () => {
  // 处理点击事件
}
</script>